<template>
    <div class="product-list"
        @touchstart="touchStart" 
        @touchmove="touchmove" 
        @touchend="touchend"
        ref="box"
    >
        <slot></slot>
    </div>
</template>

<script>
export default {
    data:function(){
        return {
            start:0,
            dis:0,
            left:0,
            preleft:0,
        }
    },
    props:[
        
    ],
    methods:{
        touchStart:function(e){
            this.start = e.touches[0].clientX;
            this.preleft = this.left;
        },
        touchmove:function(e){
            this.$refs.box.classList.remove("transtion");
            this.dis = e.touches[0].clientX - this.start;
            if(this.dis + this.preleft>80){
                this.$refs.box.style.left = '80px';
            }else{
                var maxdis = this.$refs.box.scrollWidth - this.$refs.box.clientWidth;
                if(this.dis + this.preleft<(-6*maxdis/5)){
                    this.$refs.box.style.left = -6*maxdis/5+'px';
                }else{
                    this.$refs.box.style.left = this.dis + this.preleft + "px";
                }
            }
            
            this.left = parseInt(this.$refs.box.style.left);
            
        },
        touchend:function(e){
            // this.isanimate =true;
            this.$refs.box.classList.add("transtion");
            var maxdis = this.$refs.box.scrollWidth - this.$refs.box.clientWidth;
            if(-this.left>maxdis){
                this.$refs.box.style.left = -maxdis+"px";
                 this.left = -maxdis;
            }
            if(this.left>0){
                this.$refs.box.style.left =0;
                this.left = 0;
            }
        }
    }
}
</script>

<style scoped>
    .product-list {
        /*white-space: nowrap;*/
        vertical-align: top;
        position: relative;
        left: 0;
        display: flex;
        padding-left: 6px;
    }
    .transtion{
        transition: left 0.3s;
    }
    /*#scroll-bar{
        position: absolute;
        left: 0;
        bottom: 0;
        height: 5px;
        background-color: rgba(0, 0, 0, 0.5);
        transition: opacity 0.3s;
    }*/
   
</style>